<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
        
        .box1 {
            width: 300px;
            height: 300px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="box"></div>

    <script>
        // 差
        // let nowTime = +new Date();
        // for (let i = 0; i < 1000; i++) {
        //     document.body.innerHTML += ` <div class="box1"></div>`
        // }
        // let afterTime = +new Date();
        // console.log(afterTime - nowTime);

        // 好
        // let arr = [];
        // let nowTime = +new Date();
        // for (let i = 0; i < 1000; i++) {
        //     arr.push(`<div class="box1"></div>`)
        // }
        // // console.log(arr.join(''));
        // document.body.innerHTML += arr.join('');
        // let afterTime = +new Date();
        // console.log(afterTime - nowTime);

        //最优
        let nowTime = +new Date();
        for (let i = 0; i < 1000; i++) {
            let box1 = document.createElement('div');
            box1.style.width = '300px';
            box1.style.height = '300px';
            box1.style.backgroundColor = 'blue';
            document.body.appendChild(box1);
        }
        let afterTime = +new Date();
        console.log(afterTime - nowTime);
    </script>
</body>

</html>